<template>
	<!-- 搜索 -->
	<div id="search-container">
		<div class="serchIptBtn">
			<input
				type="text"
				placeholder="请输入关键字查询事件"
				class=""
				v-model="input"
				@keyup.enter="
					queryEvent();
					activeMap();
				"
			/>
			<button
				alt=""
				class="searchTable-btn"
				@click="
					queryEvent();
					activeMap();
				"
			>
				查询
			</button>
		</div>

		<!--------------------------------------------- 事件表格弹窗 -------------------------------------------------------->
		<div v-show="isShowEventInfo" class="search-box">
			<div class="event-title">
				<span>事件详细信息</span>
				<button @click="handleClose"><i class="el-icon-close"></i></button>
			</div>
			<div class="event-content">
				<div v-if="!usertype">
					<span>事件编号</span>
					|
					<span>{{ this.form.SJid }}</span>
				</div>
				<div>
					<span>事件类型</span>
					|
					<span>{{ this.form.type }}</span>
				</div>
				<div>
					<span>事件等级</span>
					|
					<span
						:class="{
							Level1: this.form.level == '1',
							Level2: this.form.level == '2',
							Level3: this.form.level == '3',
							Level4: this.form.level == '4',
						}"
					>
						{{ this.form.level | toEventLevel }}
					</span>
				</div>
				<div>
					<span>发生时间</span>
					|
					<span>{{ this.form.datetime }}</span>
				</div>
				<div>
					<span>事件地址</span>
					|
					<span>{{ this.form.address }}</span>
				</div>
				<div v-if="!usertype">
					<span>车辆牌号</span>
					|
					<span>{{ this.form.number }}</span>
				</div>
				<div v-if="!usertype">
					<span>司机名字</span>
					|
					<span>{{ this.form.user }}</span>
				</div>
				<div>
					<span>审核状态</span>
					|
					<span
						:class="{
							todo: this.form.statu == 0,
							doing: this.form.statu == 1,
							done: this.form.statu == 2,
						}"
					>
						{{ this.form.statu | toEventSlove }}
					</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { Query } from '../../../utils/queryPoint.js';
import { mapState } from 'vuex';
import elDragDialog from '../../directive/el-dragDialog'; //导入自定义弹窗拖拽
var eventSource = new ol.source.Vector({
	wrapX: false,
});
// 创建用于标注查询到的事件的图层
var layerEvent = new ol.layer.Vector({
	source: eventSource,
	style: new ol.style.Style({
		image: new ol.style.Icon({
			// anchorOrigin: 'bottom-right',
			// anchorXUnits: 'fraction',
			// anchorYUnits: 'pixels',
			// offsetOrigin: 'top-right',
			// offset:[0,10],
			//图标缩放比例
			scale: 0.5,
			//透明度
			opacity: 1,
			//图标的url
			src: '../../../../src/assets/img/标记瞄准.png',
		}),
	}),
});

export default {
	directives: {
		// 自定义拖拽弹窗配置
		elDragDialog,
	},
	name: 'search',
	data() {
		return {
			input: '', //搜索框
			eventData: [], //查询到的所有事件数据
			// 表单数据
			form: {
				SJid: '',
				type: '',
				level: '',
				datetime: '',
				address: '',
				number: '',
				user: '',
				statu: '',
			},
			isShowEventInfo: false,
			activeNames: '1',
		};
	},

	filters: {
		// 用过滤器将事故等级从代号解译成文字
		toEventLevel: (value) => {
			if (value == 1) {
				value = '轻微事故';
			} else if (value == 2) {
				value = '一般事故';
			} else if (value == 3) {
				value = '重大事故';
			} else {
				value = '特大事故';
			}
			return value;
		},
		// 用过滤器将事故处理情况从代号解译成文字
		toEventSlove: (value) => {
			if (value == 0) {
				value = '待处理';
			} else if (value == 1) {
				value = '处理中';
			} else if (value == 2) {
				value = '已归档';
			}
			return value;
			// console.log(value);
		},
	},
	watch: {},
	computed: {
		// 批量从vuex中获取数据
		...mapState(['map', 'docLayer', 'usertype']),
	},

	methods: {
		queryEvent() {
			var MyService = this.docLayer.name;
			//创建图层对象, 将数据源添加到图层图像
			var eventLayer = new ol.layer.Vector({
				source: eventSource,
			});
			var map = this.$store.state.map;
			map.addLayer(eventLayer);
			// map.on('click', addPopup);
			//判断当前事件图层是否有要素数据
			if ((eventSource.revision_ = 0)) {
				eventSource.clear();
			}
			//获取关键字
			const keywords = this.input;
			if (!keywords) {
				this.$message.warning('输入不能为空，请重新输入');
				return;
			}
			//新建查询
			const query_sql = new Query({
				service: MyService,
				layerID: '2',
				host: 'localhost',
				port: 6163,
			});
			const sql = `事件类型 LIKE '%${keywords}%' OR 发生地点 LIKE '%${keywords}%' OR 处理状态 LIKE '${keywords}'`;
			// console.log(sql);
			query_sql.queryBySQL(sql, (result) => {
				if (result.TotalCount == 0)
					return this.$message.warning('没有查询到相应的数据');
				//初始化Zondy.Format.PolygonJSON类
				var format = new Zondy.Format.PolygonJSON();
				//将MapGIS要素JSON反序列化为ol.Feature类型数组
				var features = format.read(result);
				// console.log('查询到的数据', features);
				eventSource.addFeatures(features);
				/* 将查询到的要素高亮标注显示， */
				this.map.addLayer(layerEvent);
			});
		},
		// -----------------------------点击查询------------------------------
		// 激活地图点击事件
		activeMap() {
			this.map.on('click', this.handleMap); //激活地图点击事件
			this.map.on('pointermove', this.handleToPointer); //激活地图点击事件
		},
		//当指向标注时改变鼠标光标状态
		handleToPointer(e) {
			var pixel = this.map.getEventPixel(e.originalEvent);
			var hit = this.map.hasFeatureAtPixel(pixel);
			this.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
		},
		// 获取点击位置坐标
		handleMap(e) {
			// 获取坐标
			var position = e.coordinate;
			console.log(position);
			var service = {
				name: this.docLayer.name,
				layerId: 2, //事件在第2图层，从第0图层开始数
			};
			// console.log(position);//输出点击事件获取的坐标
			// --------------------------------------根据点坐标获取点要素----------------------------
			//1、创建一个用于查询的点形状
			let pointObj = new Zondy.Object.Point2D(position[0], position[1]);
			//设置查询点的搜索半径,不能设置太大
			pointObj.nearDis = 0.002; //设置查询半径很重要，太小都会影响查询
			//2、初始化查询结构对象，设置查询结构包含几何信息
			var queryStruct = new Zondy.Service.QueryFeatureStruct();
			//是否包含几何图形信息
			queryStruct.IncludeGeometry = true;
			//是否包含图形显示参数
			queryStruct.IncludeWebGraphic = true;
			//3、指定查询规则
			var rule = new Zondy.Service.QueryFeatureRule({
				//是否将要素的可见性计算在内
				EnableDisplayCondition: false,
				//是否完全包含
				MustInside: false,
				//是否仅比较要素的外包矩形
				CompareRectOnly: false,
				//是否相交
				Intersect: true,
			});
			//4、实例化查询参数对象
			var queryParam = new Zondy.Service.QueryParameter({
				geometry: pointObj,
				resultFormat: 'json',
				struct: queryStruct,
				rule: rule,
			});
			//设置查询分页号
			queryParam.pageIndex = 0;
			//设置查询要素数目为1个
			queryParam.recordNumber = 1;
			//5、实例化地图文档查询服务对象
			var queryService = new Zondy.Service.QueryDocFeature(
				queryParam,
				this.docLayer.name,
				2,
				{
					ip: 'localhost',
					port: '6163', //访问IGServer的端口号，.net版为6163，Java版为8089
				}
			);
			//执行查询操作，onSuccess为查询回调函数
			queryService.query(this.onSuccess);
			// -----------------------------------------------------------------------------------------------
		},
		// 成功回调
		onSuccess(e) {
			console.log(e);
			if (e.TotalCount == 0) {
				this.$message.warning('区域不存在事件,请重新查询');
				return;
			}

			//初始化Zondy.Format.PolygonJSON类
			var format = new Zondy.Format.PolygonJSON();
			//将MapGIS要素JSON反序列化为ol.Feature类型数组
			var featuresOne = format.read(e); //单个点要素数据
			// console.log('features', features);
			//获取表单数据
			featuresOne.forEach((item) => {
				(this.form.SJid = item.values_.values_.事件编号),
					(this.form.type = item.values_.values_.事件类型),
					(this.form.level = item.values_.values_.事件等级),
					(this.form.datetime = item.values_.values_.发生时间),
					(this.form.address = item.values_.values_.发生地点),
					(this.form.number = item.values_.values_.车牌号),
					(this.form.user = item.values_.values_.驾驶员),
					(this.form.statu = item.values_.values_.处理状态);
			});
			// 显示弹窗
			this.isShowEventInfo = true;
			// 设置弹窗可拖拽
			this.dragBox(
				document.querySelector('.event-title'),
				document.querySelector('.search-box')
			);
		},
		// 关闭弹窗
		handleClose() {
			this.isShowEventInfo = false;
			this.map.removeLayer(layerEvent);
			eventSource.clear(); //清空源
			this.map.un('click', this.handleMap); //移除地图点击事件
			this.input = '';
		},
		// 可拖拽div函数
		dragBox(drag, wrap) {
			function getCss(ele, prop) {
				return parseInt(window.getComputedStyle(ele)[prop]);
			}

			var initX,
				initY,
				dragable = false,
				wrapLeft = getCss(wrap, 'left'),
				wrapRight = getCss(wrap, 'top');

			drag.addEventListener(
				'mousedown',
				function (e) {
					dragable = true;
					initX = e.clientX;
					initY = e.clientY;
				},
				false
			);

			document.addEventListener('mousemove', function (e) {
				if (dragable === true) {
					var nowX = e.clientX,
						nowY = e.clientY,
						disX = nowX - initX,
						disY = nowY - initY;
					wrap.style.left = wrapLeft + disX + 'px';
					wrap.style.top = wrapRight + disY + 'px';
				}
			});

			drag.addEventListener(
				'mouseup',
				function (e) {
					dragable = false;
					wrapLeft = getCss(wrap, 'left');
					wrapRight = getCss(wrap, 'top');
				},
				false
			);
		},
	},
};
</script>

<style scoped>
#search-container {
	height: 100%;
	width: 20%;
	min-width: 220px;
	background-color: transparent;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
.serchIptBtn input {
	width: 200px;
	height: 35px;
	padding: 0 10px;
	border: none;
	outline: none;
	border: 1px solid rgb(206, 193, 193);
	border-radius: 5px 0 0 5px;
	box-sizing: border-box;
}
.serchIptBtn button {
	position: relative;
	top: 1px;
	left: 0;
	margin: 0;
	padding: 0;
	width: 60px;
	height: 35px;
	background: rgb(255, 255, 255);
	outline: none;
	border: 1px solid rgb(206, 193, 193);
}
.serchIptBtn button:hover {
	background: #d4db8b;
}
/* 事件详细信息 */
.search-box {
	position: absolute;
	top: 200px;
	left: 1200px;
	background: #fff;
}
.search-box .event-title {
	display: flex;
	justify-content: space-between;
	padding: 5px 10px;
	color: white;
	background: #2196f3;
	cursor: move;
}
.search-box .event-title button {
	background: #2196f3;
	border: none;
	outline: none;
}
.event-title button:hover {
	font-size: 16px;
	color: red;
}
.event-content {
	padding: 20px 20px;
}
.event-content div {
	padding: 10px 0px;
	border: 1px solid rgb(209, 204, 204);
}
.event-content span {
	margin: 10px 10px;
}
.event-content span:first-child {
	font-weight: 700;
}

.search-box .el-form-item {
	border: 1px solid rgb(189, 181, 181);
}
/* 查看事件状态样式 */
.todo {
	padding: 0px 5px;
	text-align: center;
	background: rgb(170, 14, 14);
	color: white;
}
.doing {
	padding: 0px 5px;
	text-align: center;
	background: rgb(201, 137, 20);
	color: white;
}
.done {
	padding: 0px 5px;

	text-align: center;
	background: rgb(16, 48, 155);
	color: white;
}
/* 查看事件等级样式 */
.Level1 {
	padding: 0px 5px;

	text-align: center;
	color: green;
	font-weight: 600px;
	border: 2px solid green;
}
.Level2 {
	padding: 0px 5px;

	text-align: center;
	color: rgb(21, 141, 189);
	font-weight: 600px;
	border: 2px solid rgb(21, 141, 189);
}
.Level3 {
	padding: 0px 5px;

	text-align: center;
	color: blue;
	font-weight: 600px;
	border: 2px solid blue;
}
.Level4 {
	padding: 0px 5px;

	text-align: center;
	color: red;
	font-weight: 600px;
	border: 2px solid red;
}
</style>
